<script setup lang="ts">
  import { ref, defineEmits } from 'vue';
  import { useI18n } from '@/hooks/web/useI18n';
  import { CloseOutlined, LeftCircleOutlined, RightCircleOutlined } from '@ant-design/icons-vue';
  import { photosDelete, postDelete } from '@/api/demo/device';
  import { message } from 'ant-design-vue';

  const emit = defineEmits(['init-info-change']);
  const { t } = useI18n();
  const props = defineProps({
    itembox: {
      type: Object,
      required: true,
    },
  });
  const gatherdetalsTaskconfirm = () => {
    if (props.itembox.type == 'post') {
      postDelete(props.itembox.id).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.configuration.deleteSucces'));
          emit('init-info-change');
        }
      });
    } else {
      photosDelete(props.itembox.id).then((res) => {
        if (res.code == 200) {
          message.success(t('sys.configuration.deleteSucces'));
          emit('init-info-change');
        }
      });
    }
  };
  const showOpen = ref(false);
  const showPostLive = ref([
    {
      title: 'id',
      dataIndex: 'id',
    },
    {
      title: t('sys.userlist.columns.name'),
      dataIndex: 'name',
    },
    {
      title: t('sys.userlist.columns.name'),
      dataIndex: 'name',
    },
  ]);
  const rolesList = ref(null);
  const resultRole = ref(null);
  const showPostdataSource = ref([]);
  const itemLve = ref(0);
  const showOpenclick = (it) => {
    itemLve.value = it;
    rolesList.value = JSON.parse(localStorage.getItem('rolesList'));
    resultRole.value = rolesList.value.find((item) => item.roleId === 1);

    if (it == 1) {
      showPostLive.value = [
        {
          title: t('sys.userlist.userId'),
          dataIndex: 'id',
        },
        {
          title: t('sys.userlist.columns.name'),
          dataIndex: 'name',
        },
        {
          title: t('sys.userlist.columns.imageProcessStatus'),
          dataIndex: 'imageProcessResult',
        },
        {
          title: t('sys.userlist.columns.taskprocess3'),
          dataIndex: 'imageProcessJson',
        },
        {
          title: t('sys.configuration.action'),
          dataIndex: 'operation',
        },
      ];
      showPostdataSource.value = props.itembox.postLikeList;
    } else {
      showPostLive.value = [
        {
          title: t('sys.userlist.userId'),
          dataIndex: 'id',
        },
        {
          title: t('sys.userlist.columns.name'),
          dataIndex: 'name',
        },
        {
          title: 'profile',
          dataIndex: 'comment',
        },
        {
          title: t('sys.userlist.columns.imageProcessStatus'),
          dataIndex: 'imageProcessResult',
        },
        {
          title: t('sys.userlist.columns.taskprocess3'),
          dataIndex: 'imageProcessJson',
        },
        {
          title: t('sys.configuration.action'),
          dataIndex: 'operation',
        },
      ];
      showPostdataSource.value = props.itembox.postCommentList;
    }
    if (resultRole.value) {
      showPostLive.value.splice(2, 0, {
        title: 'description',
        dataIndex: 'avatarDescription',
      });
    }
    showOpen.value = true;
  };
  const expandedRowKeys = ref([]);
  const onExpand = (expanded: boolean, record: any) => {
    const index = expandedRowKeys.value.indexOf(record.id);
    if (expanded && index === -1) {
      expandedRowKeys.value.push(record.id);
    } else if (!expanded && index !== -1) {
      expandedRowKeys.value.splice(index, 1);
    }
  };
  const toggleMonitoring = (record) => {
    if (expandedRowKeys.value.includes(record.id)) {
      expandedRowKeys.value = [];
      return;
    }
    expandedRowKeys.value = [record.id];
  };
  const imageShow = ref(false);
  const getImgUrl = (i: any) => {
    return i;
  };
  const imageShowclick = () => {
    imageShow.value = true;
    setTimeout(() => {
      const activeElement = document.querySelectorAll('.slick-active');
      // 确保元素存在后再执行点击
      if (activeElement) {
        activeElement[0].focus(); // 触发点击事件
        console.warn('.slick-active元素找到');
      } else {
        console.warn('.slick-active元素未找到');
      }
    }, 500);
  };
  const windowUrl = (it) => {
    const isDomainAccess =
      !window.location.hostname.includes('192.168') &&
      !window.location.hostname.includes('127.0.0.1') &&
      !window.location.hostname.includes('localhost');
    if (isDomainAccess && it.includes('192.168')) {
      const path = it.split(':9000')[1];
      return window.location.protocol + '//' + window.location.hostname + path;
    } else if (isDomainAccess && it.includes('113.46.192.236')) {
      const path = it.split(':9000')[1];
      return window.location.protocol + '//' + 'mv.bckj.site' + path;
    } else {
      return it;
    }
  };
  const fixJsonString = (input) => {
    // 移除URL周围的反引号
    let fixed = input.replace(/`([^`]+)`/g, '$1');
    // 如果字符串以双引号开始和结束，则移除它们
    if (fixed.startsWith('"') && fixed.endsWith('"')) {
      fixed = fixed.substring(1, fixed.length - 1);
    }
    return fixed;
  };
  const formatJson1 = (jsonString) => {
    try {
      if (!jsonString) return '';
      const fixedString = fixJsonString(jsonString);
      const jsonObj = JSON.parse(fixedString);
      return JSON.stringify(jsonObj, null, 2);
    } catch (error) {
      console.error('JSON格式化失败:', error.message);
      return '无效的JSON数据';
    }
  };
</script>

<template>
  <a-card>
    <a-modal width="50%" v-model:open="showOpen">
      <a-table
        bordered
        rowKey="id"
        :columns="showPostLive"
        tableLayout="auto"
        :showExpandColumn="false"
        :scroll="{ x: 1230 }"
        :dataSource="showPostdataSource"
        v-model:expandedRowKeys="expandedRowKeys"
        @expand="onExpand"
      >
        <template #expandedRowRender="{ record }">
          <div v-if="itemLve == 2"> {{ t('sys.configuration.comment') }}：{{ record.comment }}</div>
          <div v-if="resultRole">
            {{ t('sys.configuration.describe') }}：{{ record.avatarDescription }}
          </div>
          <div>
            {{ t('sys.userlist.Marketers') }}：<span style="color: red">{{
              record.marketingRate
            }}</span>
          </div>
          <div>
            {{ t('sys.userlist.Investment') }}:<span style="color: #ffd700">{{
              record.investRate
            }}</span>
          </div>
          <div> {{ t('sys.userlist.report') }}{{ record.analyzes }}</div>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'name'">
            <div style="display: flex; align-items: center; min-width: 100px">
              <a-image width="30px" :src="windowUrl(record.avatar)" />
              <div style="margin-left: 5px; text-wrap: nowrap">
                {{ record.name }}
              </div>
            </div>
          </template>
          <template v-if="column.dataIndex === 'id'">
            <div style="min-width: 100px">{{ record.id }}</div>
          </template>
          <template v-if="column.dataIndex === 'imageProcessJson'">
            <div
              v-if="record.imageProcessJson != null"
              style="
                display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
                -webkit-box-orient: vertical; /* 垂直排列 */
                -webkit-line-clamp: 1; /* 限制显示三行 */
                width: 100%;
                overflow: hidden; /* 隐藏超出范围的内容 */
                text-overflow: ellipsis; /* 使用省略号 */
              "
              >{{ record.imageProcessJson }}</div
            >
          </template>
          <template v-if="column.dataIndex === 'profile'">
            <div
              v-if="record.profile != null"
              style="
                display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
                -webkit-box-orient: vertical; /* 垂直排列 */
                -webkit-line-clamp: 1; /* 限制显示三行 */
                width: 100%;
                overflow: hidden; /* 隐藏超出范围的内容 */
                text-overflow: ellipsis; /* 使用省略号 */
              "
              >{{ record.profile }}</div
            >
          </template>
          <template v-if="column.dataIndex === 'avatarDescription'">
            <div
              v-if="record.avatarDescription != null"
              style="
                display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
                -webkit-box-orient: vertical; /* 垂直排列 */
                -webkit-line-clamp: 1; /* 限制显示三行 */
                width: 100%;
                overflow: hidden; /* 隐藏超出范围的内容 */
                text-overflow: ellipsis; /* 使用省略号 */
              "
              >{{ record.avatarDescription }}</div
            >
          </template>
          <template v-if="column.dataIndex === 'imageProcessResult'">
            <div style="min-width: 100px">
              <a-tag v-if="record.imageProcessResult == 'ACCEPT'" color="blue">
                {{ t('sys.configuration.taskprocess8') }}
              </a-tag>
              <a-tag v-else-if="record.imageProcessResult == 'NO'" color="error">
                {{ t('sys.configuration.taskprocess9') }}
              </a-tag>
              <span v-else></span>
            </div>
          </template>
          <template v-if="column.dataIndex === 'operation'">
            <a-space>
              <a-button @click="toggleMonitoring(record)" type="link">
                {{ expandedRowKeys.includes(record.id) ? '收起' : '展开' }}
              </a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-modal>
    <div class="image-box mb-4 image-hove">
      <a-image
        width="100%"
        height="300px"
        :preview="false"
        class=""
        :src="windowUrl(props.itembox.postImages[0].imageUrl)"
      />
      <div class="ant-image-mask1" @click="imageShowclick">
        <div class="ant-image-mask-info"
          ><span role="img" aria-label="eye" class="anticon anticon-eye">
            <svg
              focusable="false"
              data-icon="eye"
              width="1em"
              height="1em"
              fill="currentColor"
              aria-hidden="true"
              viewBox="64 64 896 896"
            >
              <path
                d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
              />
            </svg>
          </span>
          {{ t('sys.userlist.preview') }}
        </div>
      </div>
      <div
        v-if="imageShow"
        @click="imageShow = false"
        class="w-full h-full fixed z-1080 flex justify-center color-white items-center top-0 left-0 bg-[#000000BF]"
      >
        <div
          class="w-full h-46px fixed top-0 left-0 z-1090 flex items-center justify-end px-20px bg-[#000000CC]"
        >
          <CloseOutlined :style="{ fontSize: '25px' }" />
        </div>

        <div @click.stop class="flex justify-center align-center w-[80%] min-h-[120px] box-xs">
          <div class="flex justify-center items-center w-[100%]">
            <a-carousel style="width: 100%" arrows dots-class="slick-dots slick-thumb">
              <template style="margin-top: 20px" #customPaging="props1">
                <a>
                  <img
                    style="width: 80px"
                    @click="getImgUrl(props1.i)"
                    :src="windowUrl(props.itembox.postImages[props1.i].imageUrl)"
                  />
                </a>
              </template>
              <div v-for="item in props.itembox.postImages" :key="item">
                <div class="flex">
                  <div class="flex justify-center items-center">
                    <img style="width: 500px" :src="windowUrl(item.imageUrl)" />
                  </div>

                  <div class="w-50% ml-16px color-white py-20px witd-box">
                    <div> {{ item.imageDesc }}</div>

                    <div style="margin: 10px 0">
                      <div class="mt-1"
                        >{{ t('sys.userlist.columns.imageProcessStatus') }}:
                        <a-tag v-if="item.imageProcessResult == 'ACCEPT'" color="blue">
                          {{ t('sys.configuration.taskprocess8') }}
                        </a-tag>
                        <a-tag v-else-if="item.imageProcessResult == 'NO'" color="error">
                          {{ t('sys.configuration.taskprocess9') }}
                        </a-tag>

                        <span v-else></span>
                      </div>
                    </div>
                    <div>{{ formatJson1(item.imageProcessJson) }}</div>
                  </div>
                </div>
              </div>
            </a-carousel>
          </div>
        </div>
      </div>
    </div>
    <!--    <div :class="['images-text', { 'ellipsis-text': isEllipsis }]">-->
    <!--      <div> {{ props.imageText }}</div>-->
    <!--    </div>-->
    <div v-if="props.itembox" class="w-full">
      <div
        @click="showOpenclick(1)"
        v-if="props.itembox.postLikeList && props.itembox.postLikeList.length > 0"
        class="flex justify-between items-center"
      >
        <span class="mr-2">{{ t('sys.userlist.postLikeList') }}:</span>
        <span
          class="ant-avatarcount"
          style="background-color: rgb(253 227 207); color: rgb(245 106 0)"
          ><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%)"
            >+{{ props.itembox.postLikeList.length }}</span
          ></span
        >
      </div>
      <div
        @click="showOpenclick(2)"
        v-if="props.itembox.postCommentList && props.itembox.postCommentList.length > 0"
        class="flex justify-between items-center"
      >
        <span class="mr-2">{{ t('sys.userlist.postCommentList') }}:</span>
        <span
          class="ant-avatarcount"
          style="background-color: rgb(253 227 207); color: rgb(245 106 0)"
          ><span class="ant-avatar-string" style="transform: scale(1) translateX(-50%)"
            >+{{ props.itembox.postCommentList.length }}</span
          ></span
        >
      </div>
    </div>
    <div class="w-full">
      <div class="text-right flex justify-end">
        <div>
          <a-button @click="imageShow = true" type="primary"
            >{{ t('sys.device.examine') }}
          </a-button>
          <a-popconfirm
            @confirm="gatherdetalsTaskconfirm"
            :title="t('sys.configuration.IsDelete')"
            :ok-text="t('sys.configuration.comfig')"
            :cancel-text="t('sys.configuration.cancel')"
          >
            <a-button class="ml-10px" danger type="primary">
              {{ t('sys.configuration.delete') }}
            </a-button>
          </a-popconfirm>
        </div>
      </div>
    </div>
  </a-card>
</template>

<style scoped lang="less">
  .images-text {
    /* 初始样式 */
  }

  :deep(.slick-dots) {
    position: relative;
    height: auto;
  }

  :deep(.slick-active) {
    margin-bottom: 20px;
  }

  :deep(.slick-arrow.custom-slick-arrow) {
    z-index: 9999999;
    width: 25px;
    height: 25px;
    transition: ease all 0.3s;
    opacity: 0.3;
    background-color: rgb(31 45 61 / 11%);
    color: #fff;
    font-size: 25px;
  }

  :deep(.slick-arrow.custom-slick-arrow::before) {
    display: none;
  }

  :deep(.slick-arrow.custom-slick-arrow:hover) {
    opacity: 0.5;
    color: #fff;
  }

  :deep(.slick-slide img) {
    display: block;
    max-width: 80%;
    margin: auto;
    border: 5px solid #fff;
  }

  :deep(.slick-arrow) {
    display: none !important;
  }

  :deep(.slick-thumb) {
    bottom: 0;
  }

  :deep(.slick-thumb li) {
    width: 60px;
    height: 45px;
  }

  :deep(.slick-thumb li img) {
    display: block;
    width: 100%;
    height: 100%;
    filter: grayscale(100%);
  }

  :deep .slick-thumb li.slick-active img {
    filter: grayscale(0%);
  }

  .ant-avatarcount {
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid transparent;
    border-radius: 50%;
    background: rgb(0 0 0 / 25%);
    color: #fff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
      'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
      'Noto Color Emoji';
    font-size: 14px;
    line-height: 30px;
    list-style: none;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
  }

  .image-hove {
    position: relative;
  }

  .ant-image-mask1 {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    opacity: 0;
    background: rgb(0 0 0 / 50%);
    color: #fff;
    cursor: pointer;
    inset: 0;
  }

  .ant-image-mask1:hover {
    opacity: 1;
  }

  .ellipsis-text {
    display: -webkit-box; /* 设置为 WebKit 内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 3; /* 限制显示三行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
  }

  @media screen and (max-width: 1000px) {
    .box-xs {
      flex-direction: column;
    }

    .witd-box {
      width: 100% !important;
    }
  }
</style>
